<!--  -->
<template>
  <div>
    <el-button type="primary" plain @click="dialogTableVisible = true">添加优惠券</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="添加优惠券">
      <el-form :model="Coupan">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="Coupan.cname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" :label-width="formLabelWidth">
          <el-input v-model="Coupan.cmoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠券开始时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="Coupan.cstartday"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
        </el-form-item>
         <el-form-item label="优惠券结束时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="Coupan.cendday"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addCoupan()">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="coupan.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
      <el-table-column prop="cid" label="序号" width="150%">
      </el-table-column>
      <el-table-column prop="cname" label="名称" width="150%">
      </el-table-column>
      <el-table-column prop="cmoney" label="金额" width="150%">
      </el-table-column>
      <el-table-column prop="cstartday" label="起始时间" width="200%" >
      </el-table-column>
      <el-table-column prop="cendday" label="起始时间" width="200%" >
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="scope">
            <el-button type="primary"  @click="delCoupan(scope.row)">删除</el-button>
          <el-button type="danger" @click="fafang(scope.row)">发放给用户</el-button>
        </template>
      </el-table-column>  
    </el-table>
    <el-dialog :visible.sync="dialogTableF" title="发放优惠券">
        <el-form :model="ucoupan">
        <el-form-item label="请输入用户id" :label-width="formLabelWidth">
          <el-input v-model="ucoupan.uid" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addUcoupan()">确 定</el-button>
      </div>
    </el-dialog>
    <!--分页区域-->
  <el-pagination
      @size-change="size_change" 
      @current-change="current_change"  
      :current-page="currentPage"  
      :page-sizes="[2,3,5]"  
      :page-size="pagesize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="coupan.length"> 
  </el-pagination>
  </div>


</template>
<script >
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
  data() {
    return {
      coupan: [],
      // //添加优惠券
       dialogTableVisible: false,
      // //修改用户
      // dialogFormVisible4Edit:false,
      dialogTableF:false,
      Coupan:{
        cname:'',
        cmoney: '',
        cstartday:'',
        cendday:''
      },
      ucoupan:{
        uid:'',
        cid:'',
      },
      formLabelWidth: '120px',
       total:0,//总条目数
        pagesize:10,//每页显示条目个数
        currentPage:1,//当前页数
    }
  },
  props: [],
  components: {},
  created() {
    this.findAll();
    this.size_change(5);
  },
  mounted() {
  },
  methods: {
    fafang(s){
      this.dialogTableF=true;
      this.ucoupan.cid=s.cid
      console.log(this.ucoupan);
    },
    addUcoupan(){
       console.log(this.ucoupan);
       
       this.dialogTableF=false;
       axios({
        url:'/ucoupan/addUCoupan',
        method:'POST',
        data:this.ucoupan,
       }).then(res=>{
        alert(res.data);
       })
    },
    findAll() {
      axios.get('/coupan/getCoupanList').then(res => {
        this.coupan = res.data;
        console.log(res.data);
      })
    },
     size_change(newSize){
       this.pagesize = newSize
   },
   //监听 页码值 改变的事件
   current_change(newPage){
       this.currentPage = newPage
   },
    cancel: function () {
      this.$message.info("当前操作已取消")
      this.dialogTableVisible = false,
      this.dialogFormVisible4Edit=false
    },
    addCoupan: function () {
      axios({
        method: 'POST',
        url: '/coupan/addCoupan',
        data: this.Coupan
      })
        .then((resp) => {
          this.dialogTableVisible = false;
          this.$message.success("添加成功");
          this.findAll();
        })
    },



  }
};
</script>
<style lang='scss'>
</style>